import { ref, computed } from 'vue'

/**
 * 切换状态 Hook
 * 
 * @param {boolean} initialValue - 初始值，默认 false
 * @param {Array} options - 可选值数组，默认 [true, false]
 * 
 * @returns {object} 返回切换相关方法和状态
 * @returns {Ref<any>} returns.state - 当前状态值
 * @returns {function} returns.toggle - 切换到下一个值
 * @returns {function} returns.setTrue - 设置为 true 或第一个选项
 * @returns {function} returns.setFalse - 设置为 false 或第二个选项
 * @returns {function} returns.setValue - 设置指定值
 * 
 * @example
 * // 基础布尔切换
 * const { state, toggle, setTrue, setFalse } = useToggle()
 * 
 * // 多值切换
 * const { state, toggle } = useToggle('off', ['on', 'off', 'standby'])
 * 
 * // 在模板中使用
 * <template>
 *   <div>
 *     <p>状态: {{ state }}</p>
 *     <button @click="toggle">切换</button>
 *     <button @click="setTrue">开启</button>
 *     <button @click="setFalse">关闭</button>
 *   </div>
 * </template>
 * 
 * // 实际应用场景
 * const { state: isVisible, toggle: toggleModal } = useToggle(false)
 * const { state: theme, toggle: switchTheme } = useToggle('light', ['light', 'dark'])
 */
export function useToggle(initialValue = false, options = [true, false]) {
  const state = ref(initialValue)
  
  function toggle() {
    const currentIndex = options.indexOf(state.value)
    const nextIndex = (currentIndex + 1) % options.length
    state.value = options[nextIndex]
  }
  
  function setTrue() {
    state.value = options[0]
  }
  
  function setFalse() {
    state.value = options[1] || options[0]
  }
  
  function setValue(value) {
    if (options.includes(value)) {
      state.value = value
    }
  }
  
  return {
    state,
    toggle,
    setTrue,
    setFalse,
    setValue
  }
} 